{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Highmaps Demos\n",
    "===============\n",
    "Color axis and data labels: http://www.highcharts.com/maps/demo/color-axis\n",
    "---------------------------------------------------------------------------"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": false,
    "scrolled": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<iframe style=\"border:0;outline:none;overflow:hidden\" srcdoc=\"&lt;!DOCTYPE html&gt;\n",
       "&lt;html lang=&quot;en&quot;&gt;\n",
       "    &lt;head&gt;\n",
       "        &lt;meta charset=&quot;utf-8&quot; /&gt;\n",
       "        &lt;link href=&quot;https://www.highcharts.com/highslide/highslide.css&quot; rel=&quot;stylesheet&quot; /&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js&quot;&gt;&lt;/script&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.highcharts.com/maps/highmaps.js&quot;&gt;&lt;/script&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.highcharts.com/highcharts.js&quot;&gt;&lt;/script&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.highcharts.com/maps/modules/map.js&quot;&gt;&lt;/script&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.highcharts.com/maps/modules/data.js&quot;&gt;&lt;/script&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.highcharts.com/maps/modules/exporting.js&quot;&gt;&lt;/script&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;http://code.highcharts.com/mapdata/countries/us/us-all.js&quot;&gt;&lt;/script&gt;\n",
       "    &lt;/head&gt;\n",
       "    &lt;body style=&quot;margin:0;padding:0&quot;&gt;\n",
       "        \t    &lt;div id=&quot;container&quot; style=&quot;width:650px;height:550px;&quot;&gt;Loading....&lt;/div&gt;\n",
       "\n",
       "\n",
       "    &lt;script&gt;\n",
       "        $(function(){\n",
       "\n",
       "\n",
       "            $.getJSON(&quot;http://www.highcharts.com/samples/data/jsonp.php?filename=us-population-density.json&amp;callback=?&quot;, function (json_data)\n",
       "                {\n",
       " \n",
       "\n",
       "\n",
       "\n",
       "            var geojson = Highcharts.geojson(Highcharts.maps[&quot;countries/us/us-all&quot;]);\n",
       "$.each(json_data, function () {            this.code = this.code.toUpperCase();        });\n",
       "\n",
       "        \tHighcharts.setOptions({&quot;lang&quot;: {}, &quot;global&quot;: {}});\n",
       "            var option = {&quot;loading&quot;: {}, &quot;subtitle&quot;: {}, &quot;title&quot;: {&quot;text&quot;: &quot;US population density (/km\\u00b2)&quot;}, &quot;series&quot;: {}, &quot;mapNavigation&quot;: {&quot;enabled&quot;: true}, &quot;labels&quot;: {}, &quot;yAxis&quot;: {}, &quot;chart&quot;: {&quot;width&quot;: 650, &quot;renderTo&quot;: &quot;container&quot;, &quot;borderWidth&quot;: 1, &quot;height&quot;: 550}, &quot;tooltip&quot;: {}, &quot;plotOptions&quot;: {}, &quot;credits&quot;: {&quot;enabled&quot;: false}, &quot;colors&quot;: {}, &quot;xAxis&quot;: {}, &quot;exporting&quot;: {}, &quot;drilldown&quot;: {}, &quot;navigation&quot;: {}, &quot;legend&quot;: {&quot;verticalAlign&quot;: &quot;top&quot;, &quot;borderWidth&quot;: 0, &quot;backgroundColor&quot;: &quot;rgba(255,255,255,0.85)&quot;, &quot;y&quot;: 25, &quot;layout&quot;: &quot;horizontal&quot;, &quot;floating&quot;: true}, &quot;colorAxis&quot;: {&quot;minColor&quot;: &quot;#EEEEFF&quot;, &quot;maxColor&quot;: &quot;#000022&quot;, &quot;type&quot;: &quot;logarithmic&quot;, &quot;stops&quot;: [[0, &quot;#EFEFFF&quot;], [0.67, &quot;#4444FF&quot;], [1, &quot;#000022&quot;]], &quot;min&quot;: 1}};\n",
       "\n",
       "\n",
       "            var data = [{&quot;name&quot;: &quot;Population density&quot;, &quot;type&quot;: &quot;map&quot;, &quot;tooltip&quot;: {&quot;pointFormat&quot;: &quot;{point.code}: {point.value}/km\\u00b2&quot;}, &quot;dataLabels&quot;: {&quot;color&quot;: &quot;white&quot;, &quot;enabled&quot;: true, &quot;format&quot;: &quot;{point.code}&quot;}, &quot;joinBy&quot;: [&quot;postal-code&quot;, &quot;code&quot;], &quot;data&quot;: json_data, &quot;mapData&quot;: geojson}]\n",
       "    \t    option.series = data;\n",
       "\n",
       " \n",
       "\n",
       "            var chart = new Highcharts.Map(option);\n",
       "\n",
       "\n",
       "\n",
       "\n",
       " \n",
       "            });\n",
       " \n",
       "\n",
       "\n",
       "        \n",
       "\t});\n",
       "        &lt;/script&gt;\n",
       "\n",
       "    &lt;/body&gt;\n",
       "&lt;/html&gt;\" height=550 width=650></iframe>"
      ],
      "text/plain": [
       "<highcharts.highmaps.highmaps.Highmap at 0x7fea84cc71d0>"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from highcharts import Highmap\n",
    "H = Highmap(width = 650, height = 550)\n",
    "\n",
    "options = {\n",
    "        'chart' : {\n",
    "            'borderWidth' : 1\n",
    "        },\n",
    "\n",
    "        'title' : {\n",
    "            'text' : 'US population density (/km²)'\n",
    "        },\n",
    "\n",
    "        'legend': {\n",
    "            'layout': 'horizontal',\n",
    "            'borderWidth': 0,\n",
    "            'backgroundColor': 'rgba(255,255,255,0.85)',\n",
    "            'floating': True,\n",
    "            'verticalAlign': 'top',\n",
    "            'y': 25\n",
    "        },\n",
    "\n",
    "        'mapNavigation': {\n",
    "            'enabled': True\n",
    "        },\n",
    "\n",
    "        'colorAxis': {\n",
    "            'min': 1,\n",
    "            'type': 'logarithmic',\n",
    "            'minColor': '#EEEEFF',\n",
    "            'maxColor': '#000022',\n",
    "            'stops': [\n",
    "                [0, '#EFEFFF'],\n",
    "                [0.67, '#4444FF'],\n",
    "                [1, '#000022']\n",
    "            ]\n",
    "        },\n",
    "    } \n",
    "\n",
    "H.set_dict_options(options)\n",
    "data_url = 'http://www.highcharts.com/samples/data/jsonp.php?filename=us-population-density.json&callback=?' # set data_src\n",
    "H.add_data_from_jsonp(data_url, 'json_data', 'map', 'Population density', joinBy = ['postal-code', 'code'], # add dataset from data_src using jsonp\n",
    "     dataLabels = {\n",
    "                    'enabled': True,\n",
    "                    'color': 'white',\n",
    "                    'format': '{point.code}'\n",
    "                },\n",
    "                tooltip = {\n",
    "                    'pointFormat': '{point.code}: {point.value}/km²'\n",
    "                }\n",
    "                )\n",
    "\n",
    "H.set_map_source('http://code.highcharts.com/mapdata/countries/us/us-all.js', jsonp_map = False)\n",
    "\n",
    "\"\"\"\n",
    "python-highcharts provides add_JSscript method:\n",
    "add_JSscript(js_script, js_loc):\n",
    "js_script is the javascript string \n",
    "js_loc is location of this javascript string, can be either head (at beginning of the script) or\n",
    "end (in the end of the script)\n",
    "\n",
    "The JS string here is a function to convert (state) codes in dateset to Upper case (from lower)\n",
    "However, it is not recommended to do it this way. \n",
    "The better practice is to load data into python environment and handle in python. \n",
    "It can be done by writting a python script or using the functions in highmap_helper module\n",
    "\"\"\"\n",
    "H.add_JSscript(\"$.each(json_data, function () {\\\n",
    "            this.code = this.code.toUpperCase();\\\n",
    "        });\", 'head')\n",
    "\n",
    "H"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 2",
   "language": "python",
   "name": "python2"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 2
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython2",
   "version": "2.7.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}
